<template>
  <div class="layout">
    
    <el-row>
      <el-col :span='24'>
        24
      </el-col>
    </el-row>

    <!-- 每列占18位 -->
    <el-row>
      <el-col :span='18'>
        18
      </el-col>
    </el-row>

    <!-- 每列占6位 -->
    <el-row>
      <el-col :span='6'>
        6
      </el-col>

      <el-col :span='6'>
        6
      </el-col>

      <el-col :span='6'>
        6
      </el-col>

      <el-col :span='6'>
        6
      </el-col>

    </el-row>

    <el-row :gutter="10"><!-- :gutter，间隙 -->
      <el-col :span="6">
        <div style="background-color:pink">6</div>
      </el-col>
      <el-col :span="6">6</el-col>
      <el-col :span="6">6</el-col>
      <el-col :span="6">6</el-col>
    </el-row>

    <!-- 使用type="flex"来设置栏位的对齐方式 -->
    <!-- 
      justify="center"：居中
      justify="space-between"：分散居中
     -->
    <el-row type="flex" justify="center">
      <el-col :span='4'>4</el-col>
      <el-col :span='4'>4</el-col>
      <el-col :span='4'>4</el-col>
    </el-row>

    <!-- 偏移量 -->
    <el-row type="flex" justify="center">
      <el-col :span='4' :offset="1">4</el-col>
      <el-col :span='4'>4</el-col>
      <el-col :span='4'>4</el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: 'Layout'
  }
</script>

<style scope>
.el-row{
  background-color: lightcoral;
  margin: 20px 0;
}

.el-col{
  background-color: lightseagreen;
  color: white;
  padding: 10px 0;
  box-sizing: border-box; /* 线的像素不计算进去 */
  border-right: 1px solid white;
}

</style>